<template>
    <div style="line-height:36px;">
        <el-input v-model="uid" @blur="selectFrinds" />
        <span>当前发送者：{{uid}}</span>
        <el-container>
             <el-header>本人用户：
                <span style="color:red"> {{manager}}</span>
            </el-header>
           
        <el-container>
            <el-aside width="200px" style="border-top: 5px solid #DB7">
                <span>管理员好友列表：</span>
                    <el-table
                    :data="users"
                    border
                    style="width: 100%">
                    <el-table-column
                    fixed
                    prop="friendId"
                    label="名字"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="头像"
                    width="100">
                    <template slot-scope="scope">
                        <img  @click="chosen(scope.row)" :src="scope.row.avatar" style="width:50px;"/>
                    </template>
                    </el-table-column>
                </el-table>





            </el-aside>
            <el-container>
            <el-main style="border-top: 3px solid #DB232213">
                 <el-header>
                        <span style="color:red">正在与 {{name}}聊天</span>
                    </el-header>
                <div style="color: aquamarine">
                    <!-- 显示消息 -->
                    <textarea disabled  id="debuggerInfo" style="width:80%;height:300px"></textarea>
                </div>
            </el-main>
            <el-footer>
                    <div><span style="color:red">消息:</span><input style="width:500px;hight:150px"   type="text" v-model="msg" id="msg"></div>
                    <div><input type="button" value="发送消息" @click="sends" ></div>
            </el-footer>
            </el-container>
        </el-container>
        </el-container>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    
    name:'websocked',
       data() {
            return {
                socket: '',
                manager:'',
                msg:"",
                name: '',
                uid:"",
                accepter:"",
                users:[
                ]
            }
        },
        methods:{
            selectFrinds(){
                this.$ax.get("http://192.168.70.125:8091/sendFriend/"+this.uid).then((resp) => {
                    console.log(resp.data.data.data)
                    this.users=resp.data.data.data
                    console.log("-----------")
                    console.log(this.users)
                    // this.user=resp
            })
            },
            writeToScreen(row){
                console.log("后段的值")
                console.log(row);
                  $("#debuggerInfo").val($("#debuggerInfo").val()+"\n"+row);
                //   $("#debuggerInfo").append(row);
                // $("#debuggerInfo").val()+"/n"+row
            },
            chosen(row){
                this.name=row.friendId
                this.accepter=row.friendId
                this.init(this.name)
                console.log("通信"+this.name)
               
            },
            sends(){
                var user={
                    "sender":this.uid,
                    "accepter":this.accepter,
                    "msg":this.msg
                }
                console.log(user)
                this.writeToScreen("我说:"+user.msg)
                this.socket.send(JSON.stringify(user))
            },
            init: function () {
                if(typeof(WebSocket) === "undefined"){
                    alert("您的浏览器不支持socket")
                }else{
                    //获取端口号
                    var host=window.location.host
                    // 实例化socket
                    var id=this.name
                    this.socket = new WebSocket("ws://192.168.70.125:8091/websocket/"+id);
                    // 监听socket连接
                    this.socket.onopen = this.open
                    // 监听socket错误信息
                    this.socket.onerror = this.error
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                this.writeToScreen(msg.data)
                
            },
            send: function (params) {
                this.socket.send(params)
            },
            close: function () {
                console.log("socket已经关闭")
            }
        },
        destroyed () {
        // 销毁监听
            this.socket.onclose = this.close
        },
        created(){
            this.manager=sessionStorage.getItem("admin")
            console.log("管理员id:"+this.manager)
            // this.$ax.get("http://localhost:8091/sendFriend/1").then((resp) => {
            //     console.log(resp.data.data.data)
            //     this.users=resp.data.data.data
            //     console.log("-----------")
            //     console.log(this.users)
            //     // this.user=resp
            // })
        }
}
</script>
